<template>
  <div class="serve-statistics">
    <div class="page-section">
      <div class="page-title">服务统计</div>
      <el-form :inline="true">
        <el-form-item>
          <el-date-picker
            size="mini"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getData"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="content" v-loading="loading">
      <div class="section">
        <div class="title">服务型指标</div>
        <div class="sub-section">
          <div class="solution">
            <div class="subtitle pad-left">平均解决问题比率</div>
            <div class="chart-wrap">
              <template v-if="!loading">
                <echarts
                  class="geren"
                  :chartData="chartDataIndividual"
                ></echarts>
                <echarts class="tuandui" :chartData="chartDataTeam"></echarts>
              </template>
            </div>
          </div>
          <div class="satisfaction">
            <div class="subtitle">平均满意度评价</div>
            <div class="value-warp">
              <div class="value-left">
                <div class="label">个人</div>
                <div class="start">
                  <el-rate
                    v-model="statisticsData.satisfactionIndividual"
                    disabled
                  >
                  </el-rate>
                </div>
                <div class="num orange-font">
                  {{ statisticsData.satisfactionIndividual }}
                </div>
              </div>
              <div class="value-right">
                <div class="label">团队</div>
                <div class="start">
                  <el-rate
                    v-model="statisticsData.satisfactionIndividual"
                    disabled
                  >
                  </el-rate>
                </div>
                <div class="num blue-font">
                  {{ statisticsData.satisfactionIndividual }}
                </div>
              </div>
            </div>
            <div class="subtitle">平均服务时长</div>
            <div class="value-warp">
              <div class="value-left">
                <div class="label">个人</div>
                <div
                  class="num orange-font"
                  v-if="statisticsData.waiterTime < 60"
                >
                  {{ statisticsData.waiterTime }} <span>秒</span>
                </div>
                <div class="num orange-font" v-else>
                  {{ statisticsData.waiterTime | s2minute }}
                </div>
              </div>
              <div class="value-right">
                <div class="label">团队</div>
                <div class="num blue-font" v-if="statisticsData.teamTime < 60">
                  {{ statisticsData.teamTime }} <span>秒</span>
                </div>
                <div class="num blue-font" v-else>
                  {{ statisticsData.teamTime | s2minute }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="second-row">
        <div class="section">
          <div class="title">系统指标</div>
          <div class="subtitle pad-left">接入会话数</div>
          <div class="value-warp pad-left">
            <div class="value-left">
              <div class="label">个人</div>
              <div class="num orange-font">
                {{ statisticsData.chatNumberIndividual }}
              </div>
            </div>
            <div class="value-right">
              <div class="label">团队</div>
              <div class="num blue-font">
                {{ statisticsData.chatNumberTeam }}
              </div>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="title">会话类型指标</div>
          <ul v-if="markObjectList.length">
            <li v-for="(item, i) in markObjectList" :key="i">
              <span class="label">{{ item.label }}</span
              ><span class="value">{{ item.num }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  responseStatistcs,
  timeStatistcs,
  satisfactionStatistcs,
  chatNumberStatistcs,
  labelTagerStatistcs,
  dealQuestionStatistcs,
} from "@/api/statistics";
import { getMarks } from "@/api/chat";
import { timeformat } from "./utils";
import { mapState } from "vuex";
import Echarts from "./components/echarts";
export default {
  name: "serve-statistics",
  components: {
    Echarts,
  },
  filters: {
    s2minute(value) {
      const value_ = Number(value);
      const m = parseInt(value_ / 60);
      const s = parseInt(value_ % 60);
      return `${m}分钟${s}秒`;
    },
  },
  data() {
    return {
      loading: false,
      dateRange: [new Date(), new Date()],
      statisticsData: {
        teamResponse: 0, //团队平均响应时长
        waiterResponse: 0, //当前客服平均响应时间
        teamTime: "", //团队平均时长
        waiterTime: "", //当前客服平均时间
        satisfactionIndividual: 0, // 个人满意度
        satisfactionTeam: 0, //团队满意度
        chatNumberIndividual: 0, // 个人会话数
        chatNumberTeam: 0, //团队会话数
        dealQuestionIndividual: 0, //个人处理问题比例
        dealQuestionTeam: 0, //团队处理问题比例
      },
      markObjectList: [], //标签对照
      labelList: [],
      chartDataIndividual: {
        name: "个人",
        color: ["#FFB800", "#ff5722"],
        value: 0,
      },
      chartDataTeam: {
        name: "团队",
        color: ["#19A094", "#1e9fff"],
        value: 0,
      },
    };
  },
  computed: {
    ...mapState(["idStore"]),
    pickerOptions: () => {
      return {
        disabledDate(time) {
          return time.getTime() > new Date().getTime() + 24 * 60 * 60;
        },
      };
    },
  },
  mounted() {
    this.getMarkList();
  },
  methods: {
    // 获取标签
    getMarkList() {
      const params = ["im-data"];
      getMarks(params)
        .then((res) => {
          let {
            data: { result },
          } = res;
          const parentMarkList = result[0]["im-data"];
          const keys = parentMarkList.map((item) => item.routeStr);
          getMarks(keys).then((marks) => {
            let {
              data: { result },
            } = marks;
            this.markObjectList = parentMarkList.map((parentMark) => {
              const ids = result[0][parentMark.routeStr].map((mark) =>
                String(mark.id)
              );
              return { label: parentMark.dictKey, ids, num: 0 };
            });
            this.getData();
          });
        })
        .catch(() => {
          throw new Error("获取标签接口异常");
          // this.$message.error(`获取标签异常`);
        });
    },
    getData() {
      if (!this.idStore.waiterId) {
        this.$message.warning("请先登录");
        return;
      }
      let [start, end] = this.dateRange;
      start = timeformat(start).replace(/T.*/, "T00:00:00");
      end = timeformat(end).replace(/T.*/, "T23:59:59");
      const params = {
        talkerType: "waiter",
        talker: this.idStore.waiterId,
        startTime: start,
        endTime: end,
      };
      this.loading = true;
      Promise.all([
        dealQuestionStatistcs(params),
        responseStatistcs(params),
        timeStatistcs(params),
        satisfactionStatistcs(params),
        chatNumberStatistcs(params),
        labelTagerStatistcs(params),
      ])
        .then((res) => {
          const [
            dealQuestion,
            responseData,
            timeData,
            satisfaction,
            chatNumber,
            labelTager,
          ] = res;
          this.statisticsData.dealQuestionIndividual =
            dealQuestion.data.individual;
          this.statisticsData.dealQuestionTeam = dealQuestion.data.team;
          this.statisticsData.teamResponse = responseData.data.teamTime;
          this.statisticsData.waiterResponse = responseData.data.waiterTime;
          this.statisticsData.teamTime = Number(timeData.data.teamTime);
          this.statisticsData.waiterTime = Number(timeData.data.waiterTime);
          this.statisticsData.satisfactionIndividual = Number(
            satisfaction.data.individual
          );
          this.statisticsData.satisfactionTeam = Number(satisfaction.data.team);
          this.statisticsData.chatNumberIndividual = chatNumber.data.individual;
          this.statisticsData.chatNumberTeam = chatNumber.data.team;
          let labels = labelTager.data;

          // 分类统计赋值
          this.markObjectList.forEach((obj) => {//先清空
            obj.num = 0;
          }); 
          labels.forEach((item) => { //再统计
            this.markObjectList.forEach((obj) => {
              if (obj.ids.includes(item.labelCode)) {
                obj.num += Number(item.remark);
              }
            });
          });
          // 赋值chart
          this.chartDataIndividual.value = parseInt(
            Number(this.statisticsData.dealQuestionIndividual) * 100
          );
          this.chartDataTeam.value = parseInt(
            Number(this.statisticsData.dealQuestionTeam) * 100
          );
        })
        .catch(() => {
          this.$message.error(`服务统计异常`);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pad-left {
  padding-left: 15px;
}
.orange {
  color: #ff5722;
}
.blue {
  color: #1e9fff;
}
.orange-font {
  font-size: 28px;
  color: #ff5722;
}
.blue-font {
  font-size: 28px;
  color: #1e9fff;
}

.section {
  border: 1px solid #e6e6e6;
  .title {
    height: 39px;
    line-height: 39px;
    padding: 0 15px;
    border-bottom: 1px solid #e6e6e6;
  }
}
.sub-section {
  display: flex;
  .solution {
    .chart-wrap {
      display: flex;
      width: 520px;
      .geren {
        height: 150px;
        width: 150px;
        margin-left: 90px;
      }
      .tuandui {
        height: 150px;
        width: 150px;
        margin: 0 60px;
      }
    }
  }
  .satisfaction {
    flex: 1;
  }
}

.subtitle {
  padding-top: 15px;
}
.value-warp {
  margin-top: 25px;
  display: flex;
  .value-left,
  .value-right {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .label {
    margin-right: 15px;
  }
  .num {
    .s {
      right: 5px;
      bottom: 0;
      font-size: 14px;
    }
  }
  .start {
    width: 160px;
    ::v-deep .el-rate__icon {
      font-size: 24px;
    }
  }
}

.second-row {
  margin-top: 10px;
  display: flex;
  .section {
    flex: 1;
    height: 277px;
    &:first-child {
      margin-right: 10px;
    }
  }
  ul {
    padding: 0 15px;
    li {
      display: flex;
      height: 38px;
      line-height: 38px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
    }
  }
}
</style>